import React, {PureComponent} from 'react';
import { StyleSheet } from 'react-native';
import {TabNavigator} from "react-navigation";
import Home from './component/Home';
import Find from './component/Find';
import Message from './component/Message';
import TabBarItem from './component/TabBarItem';

// 注册tabs
const Tabs = TabNavigator({
		Home: {
			screen: Home,
			navigationOptions: {  // 也可以写在组件的static navigationOptions内
				tabBarLabel: '首页',
				tabBarIcon: ({focused, tintColor}) => (
					<TabBarItem
						tintColor={tintColor}
						focused={focused}
						normalImage={require('./../../img/tab_home.png')}
						selectedImage={require('./../../img/tab_home_press.png')}
					/>)
			}
		},
		Find: {
			screen: Find,
			navigationOptions: {
				tabBarLabel: '发现',
				tabBarIcon: ({focused, tintColor}) => (
					<TabBarItem
						tintColor={tintColor}
						focused={focused}
						normalImage={require('./../../img/tab_find.png')}
						selectedImage={require('./../../img/tab_find_press.png')}
					/>)
			}
		},
		Message: {
			screen: Message,
			navigationOptions: {
				tabBarLabel: '消息',
				tabBarIcon: ({focused, tintColor}) => (
					<TabBarItem
						tintColor={tintColor}
						focused={focused}
						normalImage={require('./../../img/tab_message.png')}
						selectedImage={require('./../../img/tab_message_press.png')}
					/>)
			}
		}
	},
	{
		animationEnabled: false, // 切换页面时是否有动画效果
		tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
		swipeEnabled: false, // 是否可以左右滑动切换tab
		backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
		tabBarOptions: {
			activeTintColor: '#f00', // 文字和图片选中颜色
			inactiveTintColor: '#999', // 文字和图片未选中颜色
			showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
			indicatorStyle: {
				height: 0  // 如TabBar下面显示有一条线，可以设高度为0后隐藏
			},
			style: {
				backgroundColor: '#fff', // TabBar 背景色
				// height: 44
			},
			labelStyle: {
				fontSize: 10, // 文字大小
			}
		}
	});

/**
 * @FileName: TabNavigatorTest
 * @Author: mazaiting
 * @Date: 2018/6/12
 * @Description:
 */
class TabNavigatorTest extends PureComponent {
	render() {
		return (
			<Tabs/>
		)
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	container: {
		backgroundColor: '#DDD'
	}
});

/**
 * 导出当前Module
 */
module.exports = TabNavigatorTest;